{% extends "base.html" %}

{% block title %}首页 - 个人工具网站集{% endblock %}

{% block content %}
<div class="flex gap-8">
    <!-- 左侧目录 -->
    <div class="w-1/4 min-w-64">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 sticky top-8">
            <div class="p-4 border-b border-gray-200">
                <h2 class="font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-th-large mr-2 text-blue-600"></i>
                    工具分类
                </h2>
            </div>
            <div class="py-2">
                <a href="{{ url_for('index') }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 transition-colors
                   {% if current_category == '全部工具' %}active bg-blue-50 text-blue-600 border-r-3 border-blue-600{% endif %}">
                    <i class="fas fa-th-large mr-3 w-4"></i>
                    <span>全部工具</span>
                    <span class="ml-auto text-sm text-gray-500">{{ tools|length }}</span>
                </a>
                
                {% for category in categories %}
                <a href="{{ url_for('index', category=category) }}" 
                   class="sidebar-item flex items-center px-4 py-3 text-gray-700 hover:bg-blue-50 transition-colors
                   {% if current_category == category %}active bg-blue-50 text-blue-600 border-r-3 border-blue-600{% endif %}">
                    {% if category == '开发助手' %}
                        <i class="fas fa-code mr-3 w-4"></i>
                    {% elif category == '图像工具' %}
                        <i class="fas fa-image mr-3 w-4"></i>
                    {% elif category == '文档处理' %}
                        <i class="fas fa-file-alt mr-3 w-4"></i>
                    {% elif category == '小游戏' %}
                        <i class="fas fa-gamepad mr-3 w-4"></i>
                    {% else %}
                        <i class="fas fa-tools mr-3 w-4"></i>
                    {% endif %}
                    <span>{{ category }}</span>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <!-- 右侧工具卡片区域 -->
    <div class="flex-1">
        <!-- 页面标题和统计 -->
        <div class="mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800 mb-2">
                        {% if current_category == '全部工具' %}
                            所有工具
                        {% else %}
                            {{ current_category }}
                        {% endif %}
                    </h1>
                    <p class="text-gray-600">共找到 {{ tools|length }} 个工具</p>
                </div>
                
                <!-- 搜索框 -->
                <div class="relative">
                    <input type="text" id="searchInput" placeholder="搜索工具..." 
                           class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 工具卡片网格 -->
        <div class="tool-grid grid gap-6" id="toolsGrid">
            {% for tool in tools %}
            <div class="tool-card bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-all duration-300 hover:shadow-lg" 
                 data-name="{{ tool[1]|lower }}" data-description="{{ tool[2]|lower }}" data-category="{{ tool[3]|lower }}">
                
                <!-- 工具图标区域 -->
                <div class="h-32 flex items-center justify-center
                    {% if tool[3] == 'PDF转图片' or tool[3] == '文档处理' %}bg-red-100
                    {% elif tool[3] == '图像工具' %}bg-green-100
                    {% elif tool[3] == '开发助手' %}bg-purple-100
                    {% elif tool[3] == '小游戏' %}bg-yellow-100
                    {% else %}bg-blue-100{% endif %}">
                    
                    {% if 'PDF' in tool[1] %}
                        <i class="fas fa-file-pdf text-4xl text-red-500"></i>
                    {% elif '图片' in tool[1] or '颜色' in tool[1] %}
                        <i class="fas fa-image text-4xl text-green-500"></i>
                    {% elif 'JSON' in tool[1] or 'Base64' in tool[1] %}
                        <i class="fas fa-code text-4xl text-purple-500"></i>
                    {% elif '游戏' in tool[1] %}
                        <i class="fas fa-gamepad text-4xl text-yellow-500"></i>
                    {% else %}
                        <i class="fas fa-tools text-4xl text-blue-500"></i>
                    {% endif %}
                </div>
                
                <!-- 工具信息 -->
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 mb-2 text-lg">{{ tool[1] }}</h3>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ tool[2] }}</p>
                    
                    <!-- 工具元信息 -->
                    <div class="flex items-center justify-between mb-4">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
                            {% if tool[3] == '文档处理' %}bg-red-100 text-red-800
                            {% elif tool[3] == '图像工具' %}bg-green-100 text-green-800
                            {% elif tool[3] == '开发助手' %}bg-purple-100 text-purple-800
                            {% elif tool[3] == '小游戏' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-blue-100 text-blue-800{% endif %}">
                            {{ tool[3] }}
                        </span>
                        <span class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-users mr-1"></i>
                            {{ tool[6] if tool[6] else 0 }} 次使用
                        </span>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="flex gap-2">
                        <a href="{{ url_for('view_tool', tool_id=tool[0]) }}" target="_blank"
                           class="flex-1 bg-blue-600 text-white text-center py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium">
                            <i class="fas fa-external-link-alt mr-1"></i>
                            使用工具
                        </a>
                        <button onclick="shareTool({{ tool[0] }}, '{{ tool[1] }}')"
                                class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            <i class="fas fa-share-alt text-gray-600"></i>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- 空状态 -->
        {% if not tools %}
        <div class="text-center py-16">
            <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-search text-3xl text-gray-400"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 mb-2">暂无工具</h3>
            <p class="text-gray-600 mb-6">该分类下还没有工具，或者没有找到匹配的工具</p>
            <a href="{{ url_for('index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                查看所有工具
            </a>
        </div>
        {% endif %}
    </div>
</div>

<!-- 分享模态框 -->
<div id="shareModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold">分享工具</h3>
            <button onclick="closeShareModal()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">分享链接</label>
            <div class="flex">
                <input type="text" id="shareUrl" readonly 
                       class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg bg-gray-50">
                <button onclick="copyShareUrl()" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-copy"></i>
                </button>
            </div>
        </div>
        <div class="text-center">
            <button onclick="closeShareModal()" 
                    class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 搜索功能
document.getElementById('searchInput').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const toolCards = document.querySelectorAll('.tool-card');
    
    toolCards.forEach(card => {
        const name = card.dataset.name;
        const description = card.dataset.description;
        const category = card.dataset.category;
        
        if (name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
});

// 分享功能
function shareTools(toolId, toolName) {
    const shareUrl = window.location.origin + '/tool/' + toolId;
    document.getElementById('shareUrl').value = shareUrl;
    document.getElementById('shareModal').classList.remove('hidden');
    document.getElementById('shareModal').classList.add('flex');
}

function closeShareModal() {
    document.getElementById('shareModal').classList.add('hidden');
    document.getElementById('shareModal').classList.remove('flex');
}

function copyShareUrl() {
    const shareUrl = document.getElementById('shareUrl');
    shareUrl.select();
    document.execCommand('copy');
    
    // 显示复制成功提示
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i>';
    button.classList.remove('bg-blue-600', 'hover:bg-blue-700');
    button.classList.add('bg-green-600');
    
    setTimeout(() => {
        button.innerHTML = originalText;
        button.classList.remove('bg-green-600');
        button.classList.add('bg-blue-600', 'hover:bg-blue-700');
    }, 2000);
}

// 工具卡片动画
document.addEventListener('DOMContentLoaded', function() {
    const toolCards = document.querySelectorAll('.tool-card');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.classList.add('fade-in');
                }, index * 100);
            }
        });
    });
    
    toolCards.forEach(card => {
        observer.observe(card);
    });
});
</script>
{% endblock %}